<script lang="ts" setup>
import type { ResultType } from '@/type/type'
import { Code } from '@/request/code'
import { type AlbumVO, getAlbumApi, initAlbumVO } from '@/request/api/album'

const route = useRoute()

const album = ref<AlbumVO>(initAlbumVO())
onMounted(() => {
  const id = Number(route.params.id) || 0
  getAlbumApi(id).then((res: ResultType<AlbumVO>) => {
    if (res.code === Code.SUCCESS) {
      album.value = res.data
    }
  })
})
</script>

<template>
  <TopImageTemplate :img="album.paths[album.paths.length - 1]">
    <template #title>
      <el-container class="items-center gap-2" direction="vertical">
        <span class="text-3xl ellipsis-1 flowing-text">{{ album.title }}</span>
        <span class="text-amber-500">{{ album.createTime }}</span>
      </el-container>
    </template>
    <el-container class="inner-box gap-5" direction="vertical">
      <span class="text-center">{{ album.introduction }}</span>
      <ImageBox v-for="item in album.paths" :key="item" :url="item" class="use-radius" />
    </el-container>
  </TopImageTemplate>
</template>

<style lang="scss" scoped></style>
